<template>
  <el-dialog v-model="visible" :title="title" width="920" show-footer show-zoom resize :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
    <template #default>
      <el-form ref="formRef" :model="form" label-align="right" label-width="120" size="default">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="仓库">{{ form.warehouse_name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="RMA">{{ form.rma }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单号">{{ form.order_no }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟踪号">{{ form.tracking_number }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="海外仓库号">{{ form.send_shipment_id }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table :data="form.detail" :round="true" height="300">
        <vxe-column field="sku" title="SKU"></vxe-column>
        <vxe-column field="seller_sku" title="渠道SKU"></vxe-column>
        <vxe-column field="fn_sku" title="FNSKU/第三方SKU"></vxe-column>
        <vxe-column field="back_num" title="退货数量">
        </vxe-column>
        <vxe-column field="num" title="良品数量">
          <template #default="{ row }">
            <el-input v-model="row.good_num" placeholder="良品数量" :disabled="handleType == 'view'" />
          </template>
        </vxe-column>
        <vxe-column field="num" title="不良品数量">
          <template #default="{ row }">
            <el-input v-model="row.no_good_num" placeholder="良品数量" :disabled="handleType == 'view'" />
          </template>
        </vxe-column>
        <vxe-column field="remark" title="备注">
          <template #default="{ row }">
            <el-input v-model="row.remark" placeholder="备注" :disabled="handleType == 'view'"/>
          </template>
        </vxe-column>
      </vxe-table>
    </template>
    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal" lang="jsx">
import { getSeaBackDetail,confirmSeaBack } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const data = reactive({
  form: {},
  title: '新增',
  handleType: null
})
const { form, title, handleType } = toRefs(data)

const statusMap = new Map([
  ['add', '新增'],
  ['edit', '编辑'],
  ['view', '查看'],
  ['in', '入库'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    detail: [
      {
        sku: "",//sku
        custom_sku: "",//自定义sku
        base_sku_code: "",//商品编码
        adjust_num: '',//调拨数量
        location_id: "",//货位编码
        remark: "",//备注
        location: []
      }
    ]
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getSeaBackDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}


const save = async() => {
  const massageArray = []
  let detail = form.value.detail.map((i, index) => {
    if (!i.good_num || !i.no_good_num) {
      massageArray.push(`第 ${index + 1} 条良品数量、不良品数量需要大于0`)
    }
    return {
      id: i.id,
      good_num: i.good_num,
      no_good_num: i.no_good_num,
      remark: i.remark
    }
  })
  if (massageArray && massageArray.length) {
    return ElMessageBox({
      title: '提示',
      message: <div>
        {massageArray.map(d => h('p', null, d))}
      </div>,
    })
  }
  try{
    const res =  await confirmSeaBack({
      id: form.value.id,
      detail
    })
    ElMessage.success('操作成功')
    close()
  }catch(e){
    throw Error(e)
  }
  
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
